<template>
  <div class="footer-group">
    <van-tabbar v-model="active">
      <van-tabbar-item :icon="tab.icon" :info="tab.info||''" :to="tab.path" v-for="(tab ,index) in tabs" :key="index">
        {{tab.name}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import store from '@/store/store'
import { mapState } from 'vuex'
import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar).use(TabbarItem)
export default {
  store,
  props: { iscur: { type: String, default: 'home' } },
  data() {
    return {
      active: null,
      tabs: [
        {
          id: 0,
          name: '主页',
          path: 'home',
          icon: 'home',
          info: ''
        },
        {
          id: 1,
          name: '推荐',
          path: 'recommend',
          icon: 'like-o',
          info: ''
        },
        {
          id: 2,
          name: '购物车',
          path: 'shopcar',
          icon: 'cart',
          info: '0'
        },
        {
          id: 3,
          name: '个人中心',
          path: 'user',
          icon: 'contact',
          info: ''
        }
      ]
    }
  },
  computed: {
    ...mapState(['subCount'])
  },
  watch: {
    subCount() {
      this.tabs.forEach(tab => {
        if (tab.path === 'shopcar') {
          tab.info = String(this.subCount)
        }
      })
    },
    active() {
      this.tabs.forEach(tab => {
        if (tab.path === this.iscur) {
          this.active = tab.id
        }
      })
      return this.active
    }
  },
  created() {
    this.tabs.forEach(tab => {
      if (tab.path === this.iscur) {
        this.active = tab.id
      }
      if (tab.path === 'shopcar') {
        tab.info = String(this.subCount)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.footer-group {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>